<template>
  <div class="mainDiv">
    <mt-navbar v-model="id">
      <mt-tab-item  :id = 'type.id' v-for="type in types"><span style="font-size: 16px">{{type.selected.text||type.title}}</span>
      </mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="id" >
      <mt-tab-container-item :id="type.id" v-for="type in [types[0],types[1],types[2]]">
        <div class="pad5">
          <mt-cell :title="item.text" is-link v-for="item in type.data" @click.native="chooseItem(type,item)"></mt-cell>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item :id="4">
        <div  v-show="types[3].info.specialname">
          <div class="cellInfo box-shadow">
            <mt-cell style="white-space: nowrap">
            <span slot="title" class="cellTitle">
              <div class="cellName">{{types[3].info.specialname}}</div>
              <div class="cellTip"> <span >报考热度排名：{{types[3].info.ranking}}</span> </div>
            </span>
            </mt-cell>
          </div>
          <mt-navbar v-model="selected">
            <mt-tab-item id="1"><span style="font-size: 16px">简介</span></mt-tab-item>
            <mt-tab-item id="2"><span style="font-size: 16px">开设院校</span></mt-tab-item>
          </mt-navbar>
          <mt-tab-container v-model="selected" >
            <mt-tab-container-item id="1">
              <div class=" pad5" v-html="types[3].info.info"></div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
              <!--开设院校-->
              <div class="pad5">
                <mt-cell :title="school.school_name" is-link v-for="school in types[3].data" @click.native="schoolInfo(school.school_name)"></mt-cell>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>

        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>

    
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "majorTypes",
      data(){ return{
        id:1,
        selected:"1",
        types:[{id:1,title:"学历",selected:{},data:[{id:'本科',text:'本科'},{id:'专科',text:'专科'}]},
          {id:2,title:'专业类别',selected:{},data:[]},
          {id:3,title:'专业',selected:{},data:[]},
          {id:4,title:'详情',selected:{},info:{},data:[]}]
      }
      },
      methods:{
        getNexTab:function(type){
            return this.types.find(n=>n.id == type.id+1)
        },
        clearNextTab:function(type){

        },
        schoolInfo:function(name){
          let vm = this;
          this.$http.get('/wx/existsSchool?name='+name).then((resp)=>{
              if(resp.data){
                vm.$router.push("/college/college/"+resp.data);
              }else{
                Toast("暂无学校信息!");
              }
            }
          )
        },
        chooseItem:function(type,item){
             let vm = this;
             type.selected = item;
             let category = this.getNexTab(type);
             switch (type.id) {
               case 1:this.$http.get("/wx/major/categories?id="+type.selected.id).then(resp=>{
                        category.data = resp.data;
                         vm.id = category.id;
                       });break;
               case 2: this.$http.get("/wx/major/specialties?id="+type.selected.id).then(resp=>{
                         category.data = resp.data;
                         vm.id = category.id;
                       });break;
               case 3: this.$http.get("/wx/major/specialtyDetail?id="+type.selected.id).then(resp=>{
                 category.data = resp.data.list;
                 category.info = resp.data.info;
                 vm.id = category.id;
               });break;
             }
        }
      }
    }
</script>

<style scoped>
  .cellInfo{
    background: white;
    padding: 5px 15px;
    margin-bottom: 3px;
    margin-top: 5px;
  }
  .cellTitle{
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
  }
  .cellName{
    font-size: 26px;
    line-height: 42px;
  }
  .cellTip{
    font-size: 14px;color:#7f8c8d;  line-height: 22px;
  }
</style>
